<template>
  <div style="  width: 97%; margin: auto;">
    <h3>{{year}}年度接受捐赠资助情况和使用情况（单位：人民币元）</h3>
    <table border="" style="width: 100%; text-align: center; font-size: 14px;">
      <tr>
        <td>项目</td>
        <td>现金</td>
        <td>非现金折合</td>
        <td width="100px">合计</td>
      </tr>
      <tr style="line-height: 30px;" v-for="(item,index) in listForm" :key="item.id">
        <td>{{item.assetTermName}}</td>
        <td v-if="!showPurpose(item.assetTermName)"><el-input v-if="showInput(item.assetTermName)" type="number" @input="inputCash(index)" v-model="item.cash" placeholder="请输入"/></td>
        <td v-if="!showPurpose(item.assetTermName)"><el-input v-if="showInput(item.assetTermName)" type="number" @input="inputCash(index)" v-model="item.cashConversion" placeholder="请输入"/></td>
        <td v-if="!showPurpose(item.assetTermName)"><span v-show="item.donationCount != 0">{{ item.donationCount }}</span></td>
        <td colspan="3" v-if="showPurpose(item.assetTermName)">
          <el-input type="textarea" v-model="item.purpose" placeholder="请输入" />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>

import { getTableInfoByPage, stSaveDonation } from '@/views/yearCheck/ykb/st/st'

export default {
  data() {
    return {
      listForm: [],
      year:localStorage.getItem('examineYear'),
      postForm: {
        assetTermName: '',//项目名称
        cash: '',//捐赠收入现金
        cashConversion: '',//捐赠收入非现金折合
        donationCount: '',//捐赠收入合计
        creditCode: localStorage.getItem('creditCode'),//统一社会信用代码
        examineYear: localStorage.getItem('examineYear'),//审查年度
        fieldDirectory: '',//
        fieldSort: '',//
        id: '',//接受捐赠资助或使用id
        organizationBaseId: '1',//社团组织id
        purpose: ''//用途和使用情况
      }
    }
  },

  created() {
    // for (let i = 0; i < 9; i++) {
    //   this.listForm.push({ ...this.postForm })
    // }
  },
  methods: {
    inputCash(i) {
      this.listForm[i].donationCount = this.getStr(this.listForm[i].cash) + this.getStr(this.listForm[i].cashConversion)
    },
    getStr(str) {
      if (str == null || str == '') {
        str = 0
      } else {
        str = parseFloat(str)
      }
      return str
    },
    showPurpose(name){
      if(name.indexOf('主要用途和使用情况') != -1){
        return true;
      }
      return false;
    },
    showInput(name){
      if(name.indexOf('境内自然人') != -1){
        return true;
      }else if(name.indexOf('境内组织') != -1){
        return true;
      }else if(name.indexOf('境外自然人') != -1){
        return true;
      }else if(name.indexOf('境外组织') != -1){
        return true;
      }
      return false;
    },
    postInfo() {
      for (let i = 0; i < this.listForm.length; i++) {
        this.listForm[i].creditCode = localStorage.getItem('creditCode')
        this.listForm[i].examineYear = localStorage.getItem('examineYear')
        this.listForm[i].organizationBaseId = '1'
        if (i == 2 || i == 3 || i == 5 || i == 6) {
          if (this.listForm[i].cash == '' || this.listForm[i].cash == null) {
            this.$message({
              message: '请输入现金！',
              type: 'error'
            })
            return;
          }
          if (this.listForm[i].cashConversion == '' || this.listForm[i].cashConversion == null) {
            this.$message({
              message: '请输入非现金折合！',
              type: 'error'
            })
            return;
          }
        }
      }
      stSaveDonation(this.listForm).then(response => {
        this.$message({
          message: '本年度接受捐赠资助情况和使用情况保存成功！',
          type: 'success'
        })
        this.getInfo();
      })
    },
    getInfo() {
      getTableInfoByPage(13).then(response => {
        console.log(response.data)
        this.listForm = JSON.parse(JSON.stringify(response.data).replace(/null/g, '""'));
        if (this.listForm == null  || this.listForm == '') {
          this.listForm = []
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}
.app-container {
  margin-top: 40px;
  margin-left: 15%;
  width: 70%;
}

.div-bg {
  width: 100%;
  background: #F0F0F0;
  height: 10px;
}

.box-card {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
}

.el-col {
  padding-left: 5px;
}

.divider-title {
  font-weight: bold;
  font-size: 18px;
}

.custom-select .el-select-dropdown {
  max-height: 600px; /* 设置为你想要的高度 */
  overflow: auto; /* 添加滚动条 */
}

table {
  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */
  width: 100%; /* 表格宽度 */
}

td {
  border: 1px solid #ebeef5;; /* 设置单线边框 */
  padding: 6px; /* 单元格内边距 */
}
.el-form-item {
  margin-bottom: 0px;
}
</style>

<!--<template>-->
<!--  <div style=" width: 100%; margin: auto;">-->
<!--    <h1>（二）本年度接受捐赠资助情况和使用情况（单位：人民币元）</h1>-->
<!--    <table border="" style="width: 100%; text-align: center; font-size: 14px;">-->
<!--      <tr>-->
<!--        <td>项目</td>-->
<!--        <td>现金</td>-->
<!--        <td>非现金折合</td>-->
<!--        <td width="100px">合计</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>一、本年度捐赠收入</td>-->
<!--        <td>{{listForm[0].cash}}</td>-->
<!--        <td>{{listForm[0].cashConversion}}</td>-->
<!--        <td>{{listForm[0].donationCount}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>（一）来自境内的捐赠</td>-->
<!--        <td>{{listForm[1].cash}}</td>-->
<!--        <td>{{listForm[1].cashConversion}}</td>-->
<!--        <td>{{listForm[1].donationCount}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>其中：来自境内自然人</td>-->
<!--        <td><el-input v-model="listForm[2].cash" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td><el-input v-model="listForm[2].cashConversion" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td>{{listForm[2].donationCount}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>来自境内组织</td>-->
<!--        <td><el-input v-model="listForm[3].cash" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td><el-input v-model="listForm[3].cashConversion" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td>{{listForm[3].donationCount}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>（二）来自境外的捐赠</td>-->
<!--        <td>{{listForm[4].cash}}</td>-->
<!--        <td>{{listForm[4].cashConversion}}</td>-->
<!--        <td>{{listForm[4].donationCount}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>其中：来自境外自然人</td>-->
<!--        <td><el-input v-model="listForm[5].cash" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td><el-input v-model="listForm[5].cashConversion" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td>{{listForm[5].donationCount}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>来自境外组织</td>-->
<!--        <td><el-input v-model="listForm[6].cash" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td><el-input v-model="listForm[6].cashConversion" placeholder="请输入"/>-->
<!--        </td>-->
<!--        <td>{{listForm[6].donationCount}}</td>-->
<!--      </tr>-->
<!--      <tr>-->
<!--        <td>二、捐赠机构名称主要用途和使用情况</td>-->
<!--        <td colspan="3">-->
<!--          <el-input type="textarea" v-model="listForm[7].purpose" placeholder="请输入"/>-->
<!--        </td>-->
<!--      </tr>-->
<!--    </table>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->

<!--import {getTableInfoByPage,stSaveDonation} from "@/views/yearCheck/ykb/st/st";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      listForm: [],-->
<!--      postForm:{-->
<!--        assetTermName: '',//项目名称-->
<!--        cash: '',//捐赠收入现金-->
<!--        cashConversion: '',//捐赠收入非现金折合-->
<!--        donationCount: '',//捐赠收入合计-->
<!--        creditCode: localStorage.getItem("creditCode"),//统一社会信用代码-->
<!--        examineYear: localStorage.getItem("examineYear"),//审查年度-->
<!--        fieldDirectory: '',//-->
<!--        fieldSort: '',//-->
<!--        id: '',//接受捐赠资助或使用id-->
<!--        organizationBaseId: '1',//社团组织id-->
<!--        purpose: '',//用途和使用情况-->
<!--      }-->
<!--    };-->
<!--  },-->

<!--  created() {-->
<!--    for (let i = 0; i < 9; i++) {-->
<!--      this.listForm.push({...this.postForm})-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    postInfo() {-->
<!--      for (let i = 0; i < this.listForm.length; i++) {-->
<!--        this.listForm[i].creditCode = localStorage.getItem("creditCode");-->
<!--        this.listForm[i].examineYear = localStorage.getItem("examineYear");-->
<!--        this.listForm[i].organizationBaseId = '1';-->
<!--      }-->
<!--      stSaveDonation(this.listForm).then(response => {-->
<!--        this.$message({-->
<!--          message: '保存接受捐赠资助情况和使用情况成功！',-->
<!--          type: 'success'-->
<!--        });-->
<!--      });-->
<!--    },-->
<!--    getInfo() {-->
<!--      getTableInfoByPage(13).then(response => {-->
<!--        console.log(response.data)-->
<!--        this.listForm = response.data;-->
<!--        if (this.listForm == null) {-->
<!--          this.listForm = [];-->
<!--        }-->
<!--      });-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style scoped lang="scss">
.el-table {
  --el-table-row-hover-bg-color: rgba(39, 137, 238, 0.1);
  --el-table-border-color:#e0e5f0;
}
:deep(.el-card.is-always-shadow) {
  box-shadow: 0 1px 14px 0 rgba(209, 224, 239, 0.6)
}

/* 拉框选中 */
.el-select-dropdown__item {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

/* 鼠标经过下拉框 */
.el-select-dropdown__item:hover {
  height: 24px;
  line-height: 24px;
  font-size: 12px;
}

.el-select-dropdown__item.selected {
  color: #2789EE;
}-->
<!--.app-container {-->
<!--  margin-top: 40px;-->
<!--  margin-left: 15%;-->
<!--  width: 70%;-->
<!--}-->

<!--.div-bg {-->
<!--  width: 100%;-->
<!--  background: #F0F0F0;-->
<!--  height: 10px;-->
<!--}-->

<!--.box-card {-->
<!--  width: 100%;-->
<!--  margin-top: 20px;-->
<!--  padding: 20px;-->
<!--}-->

<!--.el-col {-->
<!--  padding-left: 5px;-->
<!--}-->

<!--.divider-title {-->
<!--  font-weight: bold;-->
<!--  font-size: 18px;-->
<!--}-->

<!--.custom-select .el-select-dropdown {-->
<!--  max-height: 600px; /* 设置为你想要的高度 */-->
<!--  overflow: auto; /* 添加滚动条 */-->
<!--}-->

<!--table {-->
<!--  border-collapse: collapse; /* 确保表格的边框合并为单一边框 */-->
<!--  width: 100%; /* 表格宽度 */-->
<!--}-->

<!--td {-->
<!--  border: 1px solid #ababab; /* 设置单线边框 */-->
<!--  padding: 6px; /* 单元格内边距 */-->
<!--}-->
<!--</style>-->
